<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <div class="container">
      <div class="header">
        <!-- 左边 -->
        <div class="searchSub">
          <el-form :model="searchForm" ref="form" :rules="searchRules" label-width="80px" :inline="false" size="normal" class="formStyle">
            <el-form-item label="学科名称">
              <el-input type="text" v-model="searchForm.subjectName" size="small" clearable @clear="quitSearch"></el-input>
            </el-form-item>
            <el-button @click="quitSearch" size="small" class="btnStyle">清除</el-button>
            <el-button type="primary" size="small" @click="searchSubjects" class="btnStyle">搜索</el-button>
          </el-form>
        </div>
        <!-- 右边 -->
        <div class="addSub">
          <el-button type="success" @click="addDialogVisible = true">
            <i class="el-icon-edit"></i>
            <span>新增学科</span>
          </el-button>
        </div>
      </div>
      <!-- 提示 -->
      <div class="noticeSub">
        <el-alert :title="`数据一共${total}条`" type="info" show-icon> </el-alert>
      </div>
      <!-- 表格 -->
      <div class="detail">
        <el-table :data="detailList" stripe>
          <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
          <el-table-column label="学科名称" align="center" prop="subjectName"></el-table-column>
          <el-table-column label="创建者" align="center" prop="username"></el-table-column>
          <el-table-column label="创建日期" align="center">
            <template slot-scope="scope">
              {{ scope.row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column label="前台是否显示" align="center" prop="isFrontDisplay">
            <template slot-scope="slot">
              {{ slot.row.isFrontDisplay ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column label="二级目录" align="center" prop="twoLevelDirectory"></el-table-column>
          <el-table-column label="标签" align="center" prop="tags"></el-table-column>
          <el-table-column label="题目数量" align="center" prop="totals"></el-table-column>
          <el-table-column label="操作" align="center" width="300">
            <template slot-scope="scope">
              <el-link type="success" @click="urlChange(scope.row)">学科分类</el-link>&emsp; <el-link type="success" @click="tagsChange(scope.row)">学科标签</el-link>&nbsp;
              <el-link type="warning" @click="editSubjects(scope.row)">修改</el-link>&nbsp;
              <el-link type="danger" @click="delSubjects(scope.row.id)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination background layout="->,prev, pager, next,total,sizes,jumper " :total="total" :page-sizes="[5, 10, 15, 20, 30]" @size-change="sizeChange" @current-change="pageChange">
        </el-pagination>
      </div>

      <!-- 新增 / 编辑学科弹框 -->
      <el-dialog :title="isAdd ? '新增学科' : '修改学科'" :visible.sync="addDialogVisible" width="25%" @close="cancel" destroy-on-close>
        <el-form v-if="addDialogVisible" :model="editForm" ref="form" :rules="searchRules" label-width="80px" :inline="false" size="normal">
          <el-form-item label="学科名称" prop="subjectName">
            <el-input v-model="editForm.subjectName"></el-input>
          </el-form-item>
          <el-form-item label="是否显示">
            <el-switch v-model="editForm.isFrontDisplay" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
// 导入方法
import { list, remove, add, update } from '@/api/hmmm/subjects'

const SubjectItem = {
  subjectName: null
}
const EditItem = {
  subjectName: null, // 学科
  isFrontDisplay: true // 目录
}
export default {
  data() {
    return {
      addDialogVisible: false, // 添加弹框
      detailList: [], // 表格信息
      searchForm: {
        ...SubjectItem
      },
      // 弹框信息
      editForm: {
        ...EditItem
      },
      page: 1, // 页码
      pagesize: 10, // 数量
      total: 0, // 总数
      isAdd: true, // 默认添加功能
      id: null, // 曲线救国
      // 校验规则
      searchRules: {
        directoryName: [{ required: true, message: '请填写', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.loadSubjectsDeatils()
  },
  methods: {
    // 获取页面信息函数
    async loadSubjectsDeatils() {
      let { data: res } = await list({
        page: this.page,
        pagesize: this.pagesize,
        subjectName: this.searchForm.subjectName
      })
      this.detailList = res.items
      this.total = res.counts
    },
    // 数量变化
    sizeChange(val) {
      this.pagesize = val
      this.loadSubjectsDeatils()
    },
    // 页码变化
    pageChange(val) {
      this.page = val
      this.loadSubjectsDeatils()
    },
    // 清除按钮
    quitSearch() {
      this.page = 1
      this.searchForm = { ...SubjectItem }
      this.loadSubjectsDeatils()
    },
    // 搜索框
    searchSubjects() {
      this.loadSubjectsDeatils() // 发送请求
    },
    // 删除学科
    async delSubjects(id) {
      // 询问
      try {
        await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 执行删除
        await remove({
          id
        })
        this.$message.success('删除成功')
        if (this.pagesize !== 1 && this.detailList.length === 1) {
          this.page--
        }
        this.loadSubjectsDeatils()
      } catch (error) {
        this.$message.info('取消删除')
      }
    },
    // 编辑按钮
    editSubjects(val) {
      this.addDialogVisible = true // 打开弹框
      this.isAdd = false // 功能变为编辑
      this.id = val.id // 传递id
      // 回显
      this.editForm.subjectName = val.subjectName
      this.editForm.isFrontDisplay = val.isFrontDisplay ? true : false
    },
    // 弹框提交功能（添加 / 编辑）
    async onSubmit() {
      try {
        if (this.isAdd) {
          await add(this.editForm)
        } else {
          this.editForm.isFrontDisplay = this.editForm.isFrontDisplay ? 1 : 0
          await update({
            id: this.id,
            isFrontDisplay: this.editForm.isFrontDisplay,
            subjectName: this.editForm.subjectName
          })
        }
        this.$message.success(this.isAdd ? '添加成功' : '修改成功')
        this.loadSubjectsDeatils() // 更新视图
        this.addDialogVisible = false // 关闭弹框
        this.editForm = { ...EditItem } // 表单置空
        this.isAdd = true // 功能重置
      } catch (error) {
        console.log(error)
        this.$message.error(this.isAdd ? '添加失败' : '修改失败')
      }
    },
    // 弹框取消
    cancel() {
      this.addDialogVisible = false
      this.editForm = { ...EditItem } // 表单置空
      this.isAdd = true // 功能充值
    },
    // 学科分类跳转
    urlChange(val) {
      this.$router.push({
        path: '/subjects/directorys',
        query: {
          id: val.id,
          name: val.subjectName
        }
      })
    },
    // 标签页调换
    tagsChange(val) {
      this.$router.push({
        path: '/subjects/tags',
        query: {
          id: val.id,
          name: val.subjectName
        }
      })
    }
  }
}
</script>

<style scoped  >
.header {
  display: flex;
  justify-content: space-between;
}
.formStyle {
  display: flex;
  justify-content: flex-start;
}

.addSub {
  margin-right: 30px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.noticeSub {
  margin-left: 30px;
  margin-bottom: 20px;
}
.btnStyle {
  margin-top: 4px;
  margin-left: 10px;
  width: 56px;
  height: 32px;
}
</style>
